<template>
  <!-- $nextTick:在它前面数据渲染完成后执行 -->
  <!-- vue2:对象：原有属性修改它会响应式更新，新增属性它不会响应式更新 -->
  <!-- vue2:数组：能改变源数组的方法修改后会响应式更新，其它方式修改它不会响应式更新 -->
  <!-- 静默刷新：将dom先销毁，再重新渲染出来
         解决：数据渲染问题（数据修改了，但没有渲染出来）
         还原组件成初始状态  -->
  <div v-if="bol">
    <h3>{{ obj }}</h3>
    <button @click="btnClick">修改obj</button>
    <hr />
    <h4>{{ arr }}</h4>
    <button @click="btnClick2">修改arr</button>
    <hr />
    <Xxx v-if="bol2"></Xxx>
    <hr />
    <button @click="btnClick3">还原xxx组件</button>
  </div>
</template>
<script>
import Xxx from './components/Xxx.vue'
export default {
  components: {
    Xxx
  },
  data () {
    return {
      obj: {
        name: '张三',
        age: 18
      },
      arr: [1, 2, 3, 4, 5],
      bol: true,
      bol2: true
    }
  },
  methods: {
    btnClick () {
      this.obj.gender = '男'
      // this.obj.age = 21
      console.log(this.obj)
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    btnClick2 () {
      this.arr[0] = 123
      // this.arr.push(123)
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    btnClick3 () {
      this.bol2 = false
      this.$nextTick(() => {
        this.bol2 = true
      })
    }
  }
}
</script>
<style></style>
